import React from "react";
import '../../../../assest/style/font/iconfont.css'
import './orderDetail.scss'
import {createFromIconfontCN} from '@ant-design/icons';
import {Link} from 'react-router-dom';
import {DeleteOutlined } from '@ant-design/icons';

function Orderdetail() {
  const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_3609988_egtmx6wbohv.js',
    // scriptUrl的值是从阿里图标库中复制过来的，每次添加了图标都要重新复制新的链接
  });
  return (
    <div className="orderDetail">
      <div className='body'>
        {/*头部*/}
        <p className="nav">
          <Link to='/order' className="retu">
            <IconFont className=' font-png'  type = "icon-fanhuijiantou"></IconFont>返回</Link>
          <span className="f18">订单详情</span>
          <Link to='/my'>
            <IconFont className='rigth-icon' type="icon-wode"/>
          </Link>
        </p>
        {/*产品信息*/}
        <ul className="head">
          <li className='info'>产品信息</li>
          <li className='text'>
            <span className='left-text'>别墅名称:</span>
            <span className='right-text'>
              较场尾·海角9号沙滩度假别墅</span>
          </li>
          <li className='text-box'>
            <span className='left-text'>别墅地址:</span>
            <span className='right-text'>
              广东深圳大鹏新区</span>
          </li>
          <li className='text-box'>
            <span className='left-text'>房间数量:</span>
            <span className='right-text'>
              6</span>
          </li>
          <li className='text-box'>
            <span className='left-text'>入住人数:</span>
            <span className='right-text'>
              20</span>
          </li>
          <li className='text-box'>
            <span className='left-text'>入住日期:</span>
            <span className='right-text'>2021-08-30</span>
          </li>
          <li className='text-box'>
            <span className='left-text'>退房日期:</span>
            <span className='right-text'>2021-08-31</span>
          </li>
          <li className='text-box'>
            <span className='left-text'>购买份数:</span>
            <span className='right-text'>1</span>
          </li>
        </ul>
        <ul className="main">
          <li className='info'>订单信息</li>
          <li className='text'>
            <span className='left-text'>订单状态:</span>
            <span className='success'>预约成功</span>
          </li>
          <li className='text-box'>
            <span className='left-text'>订单编码:</span>
            <span className='identifier'>210818-1033759-00</span>
          </li>
          <li className='text-box'>
            <span className='left-text'>订单总价:</span>
            <span className='price'>￥6888.00</span>
          </li>
          <li className='text-box'>
            <span className='left-text'>优惠金额:</span>
            <span className='discount'>无优惠</span>
          </li>
        </ul>
      </div>
      <p className='footer'>
        <DeleteOutlined className="footer-icon"/>
      </p>
    </div>
  )
}

export default Orderdetail